<template>
  <a-form auto-label-width layout="inline" size="mini">
    <template v-for="item in option.metrics" :key="item.id">
      <div class="component-box">
        <div class="flex-between p-1">
          {{ item.name }}
          <!--          <a-button size="small" theme="primary" variant="text" @click="handleClick(item)">指标配置</a-button>-->
        </div>
        <a-form-item label="图形颜色">
          <xiri-form v-model="item.itemStyle.color" option="linearColor" />
        </a-form-item>
        <a-form-item label="显示标签" content-class="justify-between">
          <a-switch v-model="item.label.show" />
          <a-button v-if="item.label.show" @click="handleClickLabel(item)"> 标签配置 </a-button>
        </a-form-item>
      </div>
    </template>
  </a-form>
  <a-drawer v-model:visible="visibleLabel" :header="metricsForm.name + ' 标签设置'" :footer="false" sizeDraggable>
    <a-form v-if="metricsForm.name">
      <pie-label :options="metricsForm.label" />
    </a-form>
  </a-drawer>
</template>
<script setup>
import PieLabel from "@/plugins/common/options/pieLabel.vue"

defineOptions({
  name: "echarts-series"
})
const attrs = useAttrs()
const option = attrs.option

const metricsForm = ref("")

const visibleLabel = ref(false)
const handleClickLabel = (item) => {
  console.log(item)
  visibleLabel.value = true
  metricsForm.value = item
}
</script>
<style scoped lang="less">
.bi-bar {
  width: 100%;
  height: 100%;
}
.t-drawer__body {
  padding: 0 !important;
}
</style>
